<template>
  <div class="release-container">
    <div class="blog-release-title flex-middle">
      <i class="flex-center el-icon-back" @click="$router.go(-1)"></i>
      <el-input placeholder="请输入文章标题..." v-model="blog.title" />

      <div class="operation-buttons">
        <span class="word-description">
          文章将自动保存到
          <nuxt-link class="active" to="/word/drafts">草稿箱</nuxt-link>
        </span>
        <el-button type="primary" :loading="releaseBtnLoading" @click="handleWordRelease">发布</el-button>
      </div>
    </div>

    <!-- 点击发布以后选择分类和标签 -->
    <article-tag
      :drawer="showDrawer"
      :options="wordTags"
      :word-types="wordTypes"
      @close="showDrawer = false"
      @submit="handleSubmitEvent"
    />

    <client-only>
      <mavon-editor
        v-model="blog.content"
        ref="md"
        :boxShadow="false"
        :navigation="true"
        :toolbars="markdownOption"
        @save="handleSaveDocument"
      />
    </client-only>
  </div>
</template>

<script>
import API from '~/interface/Word';
// https://www.npmjs.com/package/mavon-editor
import ArticleTag from '~/components/word/ArticleTag';

var mavonEditor = require('mavon-editor')
import 'mavon-editor/dist/css/index.css';
export default {
  layout: 'fullPage',
  head() {
    return {
      title: '发布文章 - [rabbit-pie]'
    }
  },
  components: {
    ArticleTag,
    MavonEditor: mavonEditor.mavonEditor
  },
  data() {
    return {
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        code: true, // 代码块
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        table: true, // 表格
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        imagelink: true, // 图片链接
        help: true, // 帮助
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: false, // 导航目录
      },
      blog: {
        title: '',
        content: ''
      },
      wordTags: [],
      wordTypes: [],
      releaseBtnLoading: false,
      showDrawer: false // 显示右边选择标签分类栏
    }
  },

  created() {
    // 如果是以及登录了的用户才能进入文章发布页
    this.$utils.userType().then(data => {
      this.getWordTagOptions({ size: 100, type: 'category' });
      this.getWordTagOptions({ size: 100, type: 'label' });
    }).catch(err => {
      this.$router.back();
    });
  },

  methods: {
    // 获取所有标签、分类
    getWordTagOptions(data) {
      API.getWordTags(data).then(res => {
        if (data.type === 'label') {
          this.wordTags = res.list;
        } else {
          this.wordTypes = res.list;
        }
      });
    },
    handleSaveDocument(value, render) { },
    // 点击发布后选择标签、分类
    handleWordRelease() {
      const { title, content } = this.blog;

      if (!title.length) {
        this.$message.error('请输入文章标题!');
      } else if (!content.length) {
        this.$message.error('请输入文章正文!');
      } else {
        this.showDrawer = true;
      }
    },
    // 文章发布
    handleSubmitEvent(fields) {
      const { title, content } = this.blog;
      const { type, tag, files } = fields;

      if (!type) {
        this.$message.error('请选择文章分类!');
      } else if (!tag.length) {
        this.$message.error('至少选择一个文章标签!');
      } else {
        this.releaseBtnLoading = true;
        API.postNewArticle({
          title,
          content,
          category_id: type,
          label: tag.toString(),
          files,
          html: this.$refs.md.d_render,
          status: 1
        }).then(res => {
          this.$notify({
            type: 'success',
            message: "文章发布成功!"
          });
          this.releaseBtnLoading = false;
          this.$router.replace(`/detail/${res.id}`);
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.blog-release-title {
  position: relative;
  height: 62px;
  padding-right: 20%;
  background-color: #fff;

  .el-icon-back {
    position: relative;
    width: 62px;
    height: 100%;
    font-size: 28px;
    user-select: none;
    cursor: pointer;
  }

  & /deep/ .el-input__inner {
    font-size: 18px;
    color: #333;
    border: 0;

    &::placeholder {
      font-weight: bold;
    }
  }

  .operation-buttons {
    position: absolute;
    right: 30px;
    top: 0;
    padding: 10px 0;
  }

  .word-description {
    margin: 0 10px;
    color: #ccc;
  }
}

/deep/ .v-note-panel,
/deep/ .v-note-show,
/deep/ .v-note-edit {
  height: calc(100vh - 110px) !important;
}
</style>